<template>
	<view style="background:rgb(242,245,250);overflow: hidden;">
		<view class="wxLoginWrap">
			<view class="wxLoginInfo">
					<button open-type="chooseAvatar"  @chooseavatar="onChooseAvatar" 
					class="chooseAvatarBtn" plain="true">
						<u-avatar :src="isUserInfo?userInfo.avatar:''" />
						</button>
					<view :style="{paddingLeft:'5px'}">
						<u-text text="微信授权登录"  v-if="token.length==0||!isUserInfo"  @click="loginAc"></u-text>
						<view style="display: flex;flex-direction: column;justify-content: space-between;">
							<u--input v-if="token.length>0&&isUserInfo"
								type="nickname" border="none"
							    v-model="userInfo.nickName"
								@blur="saveNickName" />
								
								<image v-if="userInfo.userAuth.auditStatus==1&&userInfo.userAuth.payStatus==1&&isUserInfo"
								src="../../static/images/grzx/hy-icon.png" 
								style="width: 84rpx;height: 32rpx;margin-top:3px;" />
						</view>
						
							
							
					</view>
					
					
					
			</view>
			<view class="wxLoginxiugai" @click="xinxixiugai">
				<u-icon name="edit-pen" color="rgb(250,169,91)" size="22"></u-icon>
				<u-text text="资料" size="26rpx"></u-text>
				<u-icon name="arrow-right"  size="14"></u-icon>
			</view>
		</view>
<!-- 		<view class="loginBtuuon" @click="loginAc" v-if="token.length==0">
			微信授权登录
		</view> -->
		<view class="myOther">
			<u-cell-group :border="false">
				<u-cell
					@click="hyxxClick"
					isLink
				    title="会员信息"
				    :icon="require('@/static/images/grzx/hyxinxi.png')"
					
				></u-cell>
				<u-cell
					@click="tdxxClick"
					isLink
				    title="我的团队"
				    :icon="require('@/static/images/grzx/tdxinxi.png')"
				></u-cell>
				
				<!-- <u-cell :border="false"
					isLink
				    title="设置"
				    :icon="require('@/static/images/grzx/sz.png')"
				></u-cell> -->
			</u-cell-group>
		</view>
		
		<view class="unloginBtuuon" @click="unLoginAc" v-if="token.length>0&&isUserInfo">
			退出登录
		</view>
			<view>
			</view>
			
			<u-popup :show="authShow" mode="bottom" :closeOnClickOverlay="false" :round="10" @close="authClose" @open="authOpen">
			    <view class="authWrap">
			        <view class="authName">
			        	<u--image :src="'/static/index/logo.png'" shape="cricle" mode="widthFix" width="30px" height="30px"/>
						<text style="padding-left:10px;font-size: 30rpx;font-weight: bold;">兵团汽摩协会 申请</text>
			        </view>
					<view class="authInfo">
						<text style="font-size: 32rpx;font-weight: bold;">获取你的昵称、头像</text>
						<view class="authAvatar">
							<view class="chooseAuthAvatar">
								<text>头像：</text>
								<view>
									<button open-type="chooseAvatar"  @chooseavatar="onChooseAvatarBendi"
									class="chooseAvatarBtn" plain="true">
										<u-avatar :src="authAvatar" />
									</button>
								</view>
							</view>
							<u-icon name="arrow-right" size="14" />
						</view>
						<view class="authAvatar">
							<text>昵称：</text>
							<u--input 
								type="nickname" border="none"
							    v-model="authNickName"
								@blur="saveNickNameBendi" />
						</view>
					</view>
					
					<div style="margin-bottom: 10px;background: rgb(232,241,255);">
						<button @click="loginAcs" plain="true" style="font-size: 16px;color:rgb(47,104,202)">允许</button>
						</div>
					<div style="">
						<button plain="true" style="font-size: 16px;" @click="unLoginAcs">拒绝</button>
						</div>
						
			    </view>
			</u-popup>
		<tab-bar :value="2"></tab-bar>
			
		</view>

	</view>
</template>

<script>
	import {mapActions,mapState} from 'vuex'

	export default {
		 // 解除样式隔离
		options: {styleIsolation: 'shared',},
		computed:{
			...mapState('m_login',['token','userInfo'])
		},
		data() {
			return {
				isUserInfo:false,//是否显示页面的：头像，昵称，退出登录，微信授权登录
				authShow:false,//弹框是否弹起
				authAvatar:'',//弹框内头像
				authNickName:'',//弹框内昵称
				myDeptId:'',
			}
		},
		
		// watch:{
		// 	authShow:{
				
		// 	}
		// },
		onLoad(){
			this.isUserInfo=uni.getStorageSync('isUserInfo')?uni.getStorageSync('isUserInfo'):false

			if(!this.isUserInfo){
				this.unLoginAction()
			}
			this.getwxUserAc()
		},
		onShow() {
			this.getwxUserAc()
		},
		methods:{
			...mapActions('m_login',['uploadAwartAction','loginAction','unLoginAction','updataAvatar','updataNickName','getwxUserAction']),
			//点击修改信息
			xinxixiugai(){
				if(uni.$u.test.isEmpty(this.token)) return uni.$u.toast('请先登录')
				this.goPage('/pages/my/modify_my')
			},
			//获取用户信息
			getwxUserAc(){
				this.getwxUserAction({success:res=>{
					
				}})
			},
			
			//点击微信授权登录
			loginAc(){
				this.isUserInfo=false
				uni.setStorageSync('isUserInfo',false)
				uni.login({success:res=>{
					this.loginAction({data:{code:res.code},success:res=>{
						this.authOpen()
					}})
					
				}}) 
			},
			
		
			//关闭授权弹框
			authClose(){
				this.authShow=false
			},
			//打开授权弹框
			authOpen(){
				this.authShow=true
				this.getwxUserAction({success:res=>{
					this.authAvatar=res.data.data.avatar?res.data.data.avatar:''
					this.authNickName=res.data.data.nickName?res.data.data.nickName:''
				}})
				
			
				
			},
			
			//退出登录
			unLoginAc(){
				this.isUserInfo=false
				uni.setStorageSync('isUserInfo',false)
				this.unLoginAction();
			},
			//路由跳转
			goPage(url,obj){
				uni.$u.route(url,obj);
			},
			//选择头像
			onChooseAvatar(e){
				this.uploadAwartAction({data:e.detail.avatarUrl,success:res=>{
					this.updataAvatar({data:{avatar:e.detail.avatarUrl}})
				}})
				
			},
			//选择昵称
			saveNickName(e){
				this.updataNickName({data:{nickName:e}})
			},
			
			
			/**弹框选择头项，选择昵称**/
			//选择头像
			onChooseAvatarBendi(e){
				this.authAvatar=e.detail.avatarUrl
				this.uploadAwartAction({data:e.detail.avatarUrl,success:res=>{
					this.updataAvatar({data:{avatar:e.detail.avatarUrl}})
				}})
			},
			//选择昵称
			saveNickNameBendi(e){
				this.authNickName=e
				this.updataNickName({data:{nickName:e}})
			},
			//登录 允许登录
			loginAcs(){
				this.isUserInfo=true
				uni.setStorageSync('isUserInfo',true)
				this.authClose()
			},
			//不允许登录
			unLoginAcs(){
				this.unLoginAc()//退出登录
				this.isUserInfo=false
				uni.setStorageSync('isUserInfo',false)
				this.authClose()
			},
			//点击验证是否登录【token是否存在】
			hyxxClick(){
				if(uni.$u.test.isEmpty(this.token)) uni.$u.toast('请先登录')
				//获取用户信息【最新】
				this.getwxUserAction({success:res=>{
					let userData=res.data.data
					if(uni.$u.test.isEmpty(userData.userAuth)){
						uni.$u.route('/subpkg/hyZhuceTip/hyZhuceTip')
					}else{
						if(userData.userAuth.auditStatus==0){
							uni.$u.route('/subpkg/hyShengheLoading/hyShengheLoading')
						}
						if(userData.userAuth.auditStatus==2){
							uni.$u.route('/subpkg/hyShError/hyShError')
						}
						if(userData.userAuth.auditStatus==1&&userData.userAuth.payStatus==0){//审核通过但未缴费
							uni.$u.route('/subpkg/hyJiaofei/hyJiaofei')
						}
						if(userData.userAuth.auditStatus==1&&userData.userAuth.payStatus==1){//审核通过但未缴费
							uni.$u.route('/subpkg/hyCard/hyCard')
						}
					}

					
					
					
					
				}})
				
			},
			//点击团队信息按钮团队信息
			tdxxClick(){
				if(uni.$u.test.isEmpty(this.token)) return uni.$u.toast('请先登录')
				if(uni.$u.test.isEmpty(this.userInfo.dept)) return  uni.$u.toast('你还未加入任何团队')
				if(this.userInfo.dept.deptId==100) return uni.$u.toast('你还未加入任何团队')
				//获取用户信息【最新】
				this.getwxUserAction({success:res=>{
					this.myDeptId=res.data.data.dept.deptId
					if(res.data.data.auditStatus!=1) return uni.$u.toast('审核中或审核未通过')
					uni.$u.route('/subpkg/hytuandui/hytuandui',{
						myDeptId:this.myDeptId,
						wdtd:true
					})
				}})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.wxLoginWrap{display: flex;justify-content: space-between;align-items: center;
		margin:30rpx;background:#fff;padding:30rpx;border-radius: 11px;padding-right:0;
		
		.wxLoginInfo{display: flex;align-items: center;
			.chooseAvatarBtn{background-color:transparent;padding-left:0;padding-right:0}
		}
		.wxLoginxiugai{display: flex;align-items: center;
		background-color: rgb(255,244,214);padding:15rpx 20rpx;border-top-left-radius: 100px;border-bottom-left-radius: 100px;}
	}
	.myOther{margin:30rpx;padding: 0;background-color: #fff;border-radius: 11px;
		
	}
	/deep/ .u-cell__body{margin: 40rpx!important;padding: 0 !important;}
	/deep/ .u-cell__body image{width: 40rpx !important;height:40rpx !important;}
	/deep/ .u-cell__body .u-cell__left-icon-wrap{margin-right: 40rpx !important;}
	/deep/ .u-line{margin:0 40rpx!important;box-sizing: border-box;width: auto !important;}
	
	.loginBtuuon{text-align: center;background:darkgreen;color:#fff;margin:30rpx;padding:15px;}
	.unloginBtuuon{text-align: center;background:#fff;color:'';margin:30rpx;padding:15px;}
		button[plain] {
			border: 0
		}
		
		
		
 .authWrap{padding:15px;}
 .authName{display: flex;align-items: center;}
 .authInfo{padding: 0;margin-top:15px;}
 .authAvatar{border-bottom:1px solid #eee;padding:10px 0;display: flex;align-items: center;justify-content: space-between; margin:15px 0;}
.authWrap .chooseAvatarBtn{background-color:transparent;padding-left:0;padding-right:0}
.chooseAuthAvatar{display: flex;align-items: center;}
.custom-style {
		color: #ff0000;
		
	}
</style>
